<template>
	<PageContainer :show-back="false">
		<template #header-right>
			<view class="global-text-button" @click="toRegister">
				<text>立即注册</text>
			</view>
		</template>
		<view class="login-container">
			<view class="logo">
				<image src="@/static/logo.png" mode="aspectFill" />
			</view>
			<AccountForm v-model="form" :configs="configs" />
			<button class="global-submit-button" @click="submit">登 录</button>
			<Agreements v-model="isChecked" />
		</view>
	</PageContainer>
</template>

<script>
	import PageContainer from '@/components/PageContainer/PageContainer.vue';
	import Agreements from './components/Agreements/Agreements.vue';
	import {
		login
	} from '@/api/login';
	import {
		validatePhoneNumber
	} from '@/utils/validate.js';
	export default {
		components: {
			PageContainer,
			Agreements,
		},
		data() {
			return {
				isChecked: false,
				configs: [{
						label: '手机号',
						prop: 'phone',
						maxlength: 11,
					},
					{
						label: '密码',
						prop: 'password',
						maxlength: 12,
					}
				],
				form: {
					phone: '',
					password: '',
				}
			}
		},
		methods: {
			toRegister() {
				uni.navigateTo({
					url: '/pages/entrance/register'
				})
			},
			async submit() {
				const data = this.form;
				if (!validatePhoneNumber(data.phone)) {
					return;
				}
				if (!data.password?.trim()) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none',
					})
					return;
				}
				if (!this.isChecked) {
					uni.showToast({
						title: '请先同意软件协议',
						icon: 'none',
					})
					return;
				}
				uni.showLoading({
					title: '正在登录',
					mask: true,
				})
				this.$store.dispatch("Login", data).then(() => {
					uni.hideLoading();
					uni.showToast({
						title: '登录成功',
						icon: 'none',
					})
					uni.reLaunch({
						url: '/pages/tabBar/index/index'
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.login-container {
		padding: 50rpx 60rpx 0;
		text-align: center;

		.logo {
			margin: 80rpx 0;

			image {
				width: 187rpx;
				height: 187rpx;
			}
		}
	}
</style>